import * as React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { extendTheme } from "@chakra-ui/react"
import { Container, Flex, Box,
 Image, Button, Popover, PopoverContent,PopoverBody, PopoverTrigger   } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc
import  FormikExample  from './components/login'
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}


const theme = extendTheme({ colors })
function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box className="App" d="flex" h="100vh">
        <Container m="auto">
          <Flex >
            <Box flex="1">
              <Image width="100%"   src="/mobile.png"></Image>
              <Flex color="white" mt="10" alignItems="center" justifyContent="space-between">
               <Button  w="70%" borderRadius="30px" _hover={{ bg: "#e8391b" }} borderColor="#ea6f5a" bg="#ea6f5a">下载简书APP</Button>
               <Popover placement="top" trigger="hover" size="mini"> 
                  <PopoverTrigger>
                     <Image  width="20%"  src="/ewm.png"></Image>
                  </PopoverTrigger>
                  <PopoverContent>
                    <PopoverBody>
                    <Image w="100%"    src="/ewm.png"></Image>
                    </PopoverBody>
                  </PopoverContent>
                </Popover>
               
              </Flex>
            </Box>
            <Box flex="1" >
            <Container border="1px solid #E2E8F0" borderRadius="10px" ml="50px"  h="400px" color="white">
              <FormikExample></FormikExample>
            </Container>
            </Box>
          </Flex>
        </Container>
      </Box>
    </ChakraProvider>

  );
}

export default App;
